<template>
  <div>
    <div class="input-group">
      <select v-model="selectedIndex">
        <option v-for="(item, index) in checkList" :key="item.name" :value="index">{{ item.name }}({{ item.value }})</option>
      </select>
    </div>
    <div class="input-group">
      <input v-if="activeCheck && activeCheck.type === 'email'" v-model="verifyCode" type="text" class="input" :placeholder="$t('请输入邮箱验证码')" />
      <input v-if="activeCheck && activeCheck.type === 'phone'" v-model="verifyCode" type="text" class="input" :placeholder="$t('请输入手机号验证码')" />
      <div class="input-right w-80">
        <span v-if="loading" class="link">{{ $t('发送中...') }}</span>
        <span v-else-if="count === 60" class="link" @click="send">{{ $t('发送验证码') }}</span>
        <span v-else class="link">{{ count }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import { Toast } from 'mint-ui'
import { regEmail, regMobile } from '@/utils/format'
let timerId
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      loading: false,
      verifyCode: '',
      count: 60,
      selectedIndex: 0
    }
  },
  computed: {
    ...mapState({
      phoneWithZone: ({ auth }) => auth.user.mobile_phone,
      email: ({ auth }) => auth.user.email
    }),
    checkList () {
      const list = []
      if (this.email) {
        list.push({
          name: '邮箱验证',
          value: regEmail(this.email),
          type: 'email'
        })
      }
      if (this.phoneWithZone) {
        list.push({
          name: '手机号验证',
          value: regMobile(this.phoneWithZone),
          type: 'phone'
        })
      }
      return list
    },
    activeCheck () {
      return this.checkList[this.selectedIndex]
    }
  },
  watch: {
    verifyCode (val, oldVal) {
      this.$emit('changeInput', this.name, val)
    }
  },
  beforeMount () {
    if (!this.phoneWithZone) {
      this.getUserInfo()
    }
  },
  methods: {
    ...mapActions({
      sendSms: 'auth/sendSms',
      sendEmailCode: 'auth/sendEmailCode',
      getUserInfo: 'auth/getUserInfo'
    }),
    resetCount () {
      this.count = 60
      clearInterval(timerId)
    },
    countdown () {
      this.resetCount()
      this.count--
      timerId = setInterval(() => {
        this.count--
        if (this.count === 0) {
          this.resetCount()
        }
      }, 1000)
    },
    send () {
      if (this.loading) { return }
      const succeed = () => {
        this.loading = false
        this.countdown()
      }
      const failed = () => {
        this.loading = false
        this.resetCount()
        Toast('发送失败')
      }

      const check = this.activeCheck
      if (!check) {
        Toast('验证方式不存在')
        return
      }
      this.loading = true
      switch (check.type) {
        case 'phone':
          // 手机号
          this.sendSms({
            mobile_phone: this.phoneWithZone,
            type: 3
          })
            .then(succeed)
            .catch(failed)
          break
        case 'email':
          // 邮箱
          this.sendEmailCode({
            email: this.email,
            type: 3
          })
            .then(succeed)
            .catch(failed)
          break
      }
    }
  }
}
</script>
<style>
.input-group {
  display: flex;
  margin-bottom: 12px;
}
.input {
  flex: 1;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  padding-left: 4px;
  background-color: #f4f4f4;
  border: 1px solid #f4f4f4;
}
.input:focus {
  border: 1px solid #76bdf3;
}
.input-right {
  margin-left: 10px;
  width: 36px;
}
.w-80 {
  width: 80px;
}
.link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
</style>
